<template>
  <div class="main">

<li style="background: white" class="title">热门提问</li>
 <swiper :list="demo01_list" v-model="demo01_index" @on-index-change="onIndexChange"></swiper>
 <div class="content">
            
<li v-for="question in questionList">
                     <question :data="question" ></question>
                     </li>
             <infinite-loading :on-infinite="onInfinite" spinner="waveDots" :distance="distance" ref="infiniteLoading">
                   <i slot="spinner" class="loading-customer-spiral"></i>
                   <p slot="no-more">到底了 :)</p>
             </infinite-loading>
            </div>
<customer-footer index="0">
</customer-footer>
</div>
</template>
<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import {
        Swiper
    } from 'vux/src/components/swiper'
    const baseList = [{
        url: '',
        img: '/fengshui/static/pic/banner.jpg',
        title: '「得解」风水问答平台'
    }]
    import Question from '../components/Question'
    export default {
        components: {
            InfiniteLoading,
            Question,
            Swiper
        },
        data() {
            return {
                distance: 10,
                questionList: [],
                page_count: 100,
                page_index: 0,
                demo01_index: 0,
                demo01_list: baseList
            }
        },
        created() {},
        methods: {
            onIndexChange: function() {

                console.log(arguments)

            },
            onInfinite: function() {
                let vm = this;
                if (vm.page_index >= vm.page_count) {
                    return;
                }
                let params = {
                    do: 'hotlist',
                    p: vm.page_index + 1
                }
                vm.$http.jsonp(vm.url.acid, {
                    params: params
                }).then(response => {
                    let body = response.body;
                    vm.questionList = vm.questionList.concat(body.data);
                    vm.page_count = body.page_count;
                    vm.page_index = body.page_index;
                    //完成加载
                    vm.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                    if (vm.page_index >= vm.page_count) {
                        vm.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                    }

                }, response => {
                    //完成加载
                    vm.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                    vm.$vux.alert.show({
                        title: '错误提示!',
                        content: '网络连接失败，请连网后重试'
                    })
                });
            }
        }
    }
</script>
<style lang="less" scoped>
    @import "../css/customer-spinner.less";
</style>

<style scoped>
    li {
        list-style-type: none;
    }
    
    .vux-demo {
        text-align: center;
    }
    
    .logo {
        width: 100px;
        height: 100px
    }
    
    .title {
        height: 2.25rem;
        line-height: 2.25rem;
        color: #999;
        font-size: .7rem;
        text-align: center;
        padding: 0;
    }
</style>